<template>
  <div class="divier-title" :class="{divierTitleBackground:!noBackground}">
    <div class="divier-title__box">
      <el-divider class="divier-title-line" direction="vertical"></el-divider>
      <span class="divier-title-text" :style="{fontSize: fontSize + 'px'}">{{title}}</span>
    </div>
    <slot></slot>
    <!-- <div>
      <slot></slot>
    </div> -->
  </div>
</template>

<script>
export default {
  props: ["title", "noBackground","fontSize"],
  data() {
    return {};
  }
};
</script>

<style lang="less">
.divier-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 15px 0px;
}
.divierTitleBackground {
  /* margin: 0; */
  // padding: 6px 0;
  border: none;
  background-color: @kr-detail_title_active_color;
}
.divier-title__box {
  display: flex;
  align-items: center;
}
.divier-title-line {
  width: 3px;
  height: 28px;
  background-color:@kr-elementUI-color;
}
.divier-title-text {
  font-weight: bold;
}
.el-divider--vertical{
  margin-left: 0px;
  margin-right: 8px;
}
</style>